<template>
  <view class="tp-summary-card">
    <view class="card-refer">
      <ai-icon type="icon-refer" :size="20" color="var(--gray-6)"></ai-icon>
    </view>
    <text class="content">{{content}}</text>
  </view>
</template>

<script>
  export default {
    name:"tp-summary-card",
    props: {
      content: String
    },
    data() {
      return {
        
      };
    }
  }
</script>

<style lang="scss">
  @import "@/styles/_var.scss";
  .tp-summary-card {
    overflow: hidden;
    background: lighten($brand-3, 3%);
    border-radius: $card-border-radius;
    box-shadow: var(--shadow-2);
    padding: $card-padding;
    
    display: flex;
    
    .card-refer {
      margin-top: -6px;
      margin-left: -6px;
      padding-right: 4px;
    }
    
    .content {
      color: var(--gray-2);
      flex: 1
    }
  }

</style>